/**
 * 标签管理 - 新增/编辑标签
 */
import React from 'react';
import { Modal } from 'antd';
import TagForm from './TagForm';

const TagModal = ({ onOk, width = 1160, dataId, onClose, visible, ...res }) => {
    const formRef = React.useRef();

    const [submitLoading, setSubmitLoading] = React.useState(false);

    // 关闭后重置表单的值
    const [formVisitable, setFormVisitable] = React.useState(true);
    React.useEffect(() => {
        if (visible) {
            setFormVisitable(visible);
        }
    }, [visible]);
    const handleOk = () => {
        setSubmitLoading(true);
        formRef.current
            .submit()
            .then(() => {
                if (onOk) {
                    onOk();
                }
            })
            .finally(() => {
                setSubmitLoading(false);
            });
    };

    return (
        <Modal
            {...res}
            visible={visible}
            title={!dataId ? '新增标签' : '编辑标签'}
            width={width}
            onOk={handleOk}
            confirmLoading={submitLoading}
            afterClose={() => setFormVisitable(false)}
        >
            {formVisitable && <TagForm wrappedComponentRef={formRef} id={dataId}></TagForm>}
        </Modal>
    );
};

export default TagModal;
